:root {
  --bg-body: silver;
  --color-body: black;

  --bg-content: #f0f0f0;
  --color-content: #222222;

  --bg-content-2: #d8d8d8;
  --color-content-2: #000;

  --bg-hover: #adadad;

  --shadow-concave: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --shadow-convex: inset -2px -2px #0a0a0a, inset 1px 1px #0a0a0a, inset 2px 2px #fff, inset -3px -3px grey, inset 3px 3px #dfdfdf;
}

:root.dark {
  --bg-body: #000;
  --color-body: white;

  --bg-content: #222831;
  --color-content: #eeeeee;

  --bg-content-2: #393e46;
  --color-content-2: #f9f7f7;

  --bg-hover: #3b3b3b;

  --shadow-concave: inset -1px -1px #808080, inset 1px 1px #000, inset -2px -2px #808080, inset 2px 2px #404040;
  --shadow-convex: inset -2px -2px #000, inset 1px 1px #000, inset 2px 2px #808080, inset -3px -3px #404040, inset 3px 3px #808080;
}

.color-body {
  background: var(--bg-body);
  color: var(--color-body);
}

.color-content {
  background: var(--bg-content);
  color: var(--color-content);
}


.color-content-2 {
  background: var(--bg-content-2);
  color: var(--color-content-2);
}

.convex {
  background: var(--bg-body);
  box-shadow: var(--shadow-convex);
  padding: 2px
}

.concave {
  background: var(--bg-content);
  box-shadow: var(--shadow-concave);
  padding: 2px
}


button.my-button {
  border: none;
  box-shadow: var(--shadow-convex);
  padding: 0.25rem 0.5rem;
  background: var(--bg-body);
  user-select: none;
  cursor: pointer;
  &:hover {
    background: var(--bg-hover);
  }
  &:active {
    box-shadow: var(--shadow-concave);
  }
}

input.my-input {
  outline: none;
  border: none;
  box-shadow: var(--shadow-concave);
  padding: 2px 0.25rem;
  background: var(--bg-content);
}
